@alert-background-critical: rgb(250, 234, 234);
@alert-background-info: rgb(232, 244, 253);
@alert-background-success: rgb(234, 245, 234);
@alert-background-warning: rgb(254, 242, 230);
@alert-icon-critical: rgb(210, 28, 28);
@alert-icon-info: rgb(0, 112, 200);
@alert-icon-success: rgb(4, 135, 36);
@alert-icon-warning: rgb(179, 98, 0);
@alert-color-text-critical: rgb(151, 12, 12);
@alert-color-text-info: rgb(0, 90, 163);
@alert-color-text-success: rgb(41, 107, 51);
@alert-color-text-warning: rgb(138, 69, 0);
@alert-color-text-link: rgb(79, 94, 113);
@badge-border-radius: 12;
@badge-bundle-basic-background: linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
@badge-bundle-basic-foreground: rgb(255, 255, 255);
@badge-bundle-medium-background: linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
@badge-bundle-medium-foreground: rgb(255, 255, 255);
@badge-bundle-top-background: linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
@badge-bundle-top-foreground: rgb(255, 255, 255);
@badge-critical-background: rgb(210, 28, 28);
@badge-critical-foreground: rgb(255, 255, 255);
@badge-critical-subtle-background: rgb(250, 234, 234);
@badge-critical-subtle-foreground: rgb(151, 12, 12);
@badge-dark-background: rgb(37, 42, 49);
@badge-dark-foreground: rgb(255, 255, 255);
@badge-info-background: rgb(0, 112, 200);
@badge-info-foreground: rgb(255, 255, 255);
@badge-info-subtle-background: rgb(232, 244, 253);
@badge-info-subtle-foreground: rgb(0, 90, 163);
@badge-neutral-background: rgb(245, 247, 249);
@badge-neutral-foreground: rgb(37, 42, 49);
@badge-success-background: rgb(4, 135, 36);
@badge-success-foreground: rgb(255, 255, 255);
@badge-success-subtle-background: rgb(234, 245, 234);
@badge-success-subtle-foreground: rgb(41, 107, 51);
@badge-warning-background: rgb(179, 98, 0);
@badge-warning-foreground: rgb(255, 255, 255);
@badge-warning-subtle-background: rgb(254, 242, 230);
@badge-warning-subtle-foreground: rgb(138, 69, 0);
@badge-white-background: rgb(255, 255, 255);
@badge-white-foreground: rgb(37, 42, 49);
@button-link-critical-background: transparent; // Used for the background of critical ButtonLink in the default state.
@button-link-critical-background-hover: rgb(248, 226, 226); // Used for the background of critical ButtonLink in the hover state.
@button-link-critical-background-active: rgb(243, 206, 206); // Used for the background of critical ButtonLink in the active and the focus state.
@button-link-critical-foreground: rgb(210, 28, 28); // Used for the text of critical ButtonLink in the default state.
@button-link-critical-foreground-hover: rgb(185, 25, 25); // Used for the text of critical ButtonLink in the hover state.
@button-link-critical-foreground-active: rgb(157, 21, 21); // Used for the text of critical ButtonLink in the active and the focus state.
@button-link-primary-background: transparent; // Used for the background of primary ButtonLink in the default state.
@button-link-primary-background-hover: rgb(214, 240, 236); // Used for the background of primary ButtonLink in the hover state.
@button-link-primary-background-active: rgb(191, 232, 226); // Used for the background of primary ButtonLink in the active and the focus state.
@button-link-primary-foreground: rgb(0, 143, 123); // Used for the text of primary ButtonLink in the default state.
@button-link-primary-foreground-hover: rgb(0, 92, 79); // Used for the text of primary ButtonLink in the hover state.
@button-link-primary-foreground-active: rgb(0, 66, 57); // Used for the text of primary ButtonLink in the active and the focus state.
@button-link-secondary-background: transparent; // Used for the background of secondary ButtonLink in the default state.
@button-link-secondary-background-hover: rgb(229, 234, 239); // Used for the background of secondary ButtonLink in the hover state.
@button-link-secondary-background-active: rgb(214, 222, 230); // Used for the background of secondary ButtonLink in the active and the focus state.
@button-link-secondary-foreground: rgb(37, 42, 49); // Used for the text of secondary ButtonLink in the default state.
@button-link-secondary-foreground-hover: rgb(24, 27, 32); // Used for the text of secondary ButtonLink in the hover state.
@button-link-secondary-foreground-active: rgb(11, 12, 15); // Used for the text of secondary ButtonLink in the active and the focus state.
@button-bundle-basic-background: linear-gradient(to top right, #E13E3B 0%, #E87E09 100%);
@button-bundle-basic-background-hover: linear-gradient(to top right, #BD2825 0%, #D67000 100%);
@button-bundle-basic-background-active: linear-gradient(to top right, #9F1816 0%, #C36802 100%);
@button-bundle-medium-background: linear-gradient(to top right, #3719AB 0%, #8539DB 100%);
@button-bundle-medium-background-hover: linear-gradient(to top right, #2D1393 0%, #7343AA 100%);
@button-bundle-medium-background-active: linear-gradient(to top right, #250F79 0%, #5A3485 100%);
@button-bundle-top-background: linear-gradient(to top right, #2D2D2E 0%, #696E73 100%);
@button-bundle-top-background-hover: linear-gradient(to top right, #171718 0%, #51575C 100%);
@button-bundle-top-background-active: linear-gradient(to top right, #101011 0%, #51575C);
@button-critical-subtle-background: rgb(250, 234, 234);
@button-critical-subtle-background-hover: rgb(248, 226, 226);
@button-critical-subtle-background-active: rgb(243, 206, 206);
@button-critical-subtle-foreground: rgb(151, 12, 12);
@button-critical-subtle-foreground-hover: rgb(137, 11, 11);
@button-critical-subtle-foreground-active: rgb(109, 9, 9);
@button-critical-background: rgb(210, 28, 28);
@button-critical-background-hover: rgb(185, 25, 25);
@button-critical-background-active: rgb(157, 21, 21);
@button-critical-foreground: rgb(255, 255, 255);
@button-critical-foreground-hover: rgb(255, 255, 255);
@button-critical-foreground-active: rgb(255, 255, 255);
@button-small-font-size: 13;
@button-normal-font-size: 15;
@button-large-font-size: 16;
@button-info-background: rgb(0, 112, 200);
@button-info-background-hover: rgb(1, 97, 172);
@button-info-background-active: rgb(1, 80, 142);
@button-info-foreground: rgb(255, 255, 255);
@button-info-foreground-hover: rgb(255, 255, 255);
@button-info-foreground-active: rgb(255, 255, 255);
@button-without-text-padding: 0;
@button-padding-x-small: 8;
@button-padding-small: 12;
@button-padding-normal: 16;
@button-padding-large: 28;
@button-primary-subtle-background: rgb(225, 244, 243);
@button-primary-subtle-background-hover: rgb(214, 240, 236);
@button-primary-subtle-background-active: rgb(191, 232, 226);
@button-primary-subtle-foreground: rgb(0, 112, 97);
@button-primary-subtle-foreground-hover: rgb(0, 92, 79);
@button-primary-subtle-foreground-active: rgb(0, 66, 57);
@button-primary-background: rgb(0, 143, 123);
@button-primary-background-hover: rgb(0, 117, 101);
@button-primary-background-active: rgb(0, 97, 83);
@button-primary-foreground: rgb(255, 255, 255);
@button-primary-foreground-hover: rgb(255, 255, 255);
@button-primary-foreground-active: rgb(255, 255, 255);
@button-primary-border-color-focus: rgba(0, 143, 123, 0.5);
@button-secondary-background: rgb(232, 237, 241);
@button-secondary-background-hover: rgb(220, 227, 233);
@button-secondary-background-active: rgb(202, 212, 222);
@button-secondary-foreground: rgb(37, 42, 49);
@button-secondary-foreground-hover: rgb(24, 27, 32);
@button-secondary-foreground-active: rgb(11, 12, 15);
@button-success-background: rgb(4, 135, 36);
@button-success-background-hover: rgb(4, 118, 32);
@button-success-background-active: rgb(3, 99, 27);
@button-success-foreground: rgb(255, 255, 255);
@button-success-foreground-hover: rgb(255, 255, 255);
@button-success-foreground-active: rgb(255, 255, 255);
@button-warning-background: rgb(179, 98, 0);
@button-warning-background-hover: rgb(153, 84, 0);
@button-warning-background-active: rgb(128, 70, 0);
@button-warning-foreground: rgb(255, 255, 255);
@button-warning-foreground-hover: rgb(255, 255, 255);
@button-warning-foreground-active: rgb(255, 255, 255);
@button-white-background: rgb(255, 255, 255);
@button-white-background-hover: rgb(245, 247, 249);
@button-white-background-active: rgb(229, 234, 239);
@button-white-foreground: rgb(37, 42, 49);
@button-white-foreground-hover: rgb(24, 27, 32);
@button-white-foreground-active: rgb(11, 12, 15);
@button-white-border-color-focus: rgba(231, 236, 241, 0.5);
@country-flag-shadow: rgb(37, 42, 49);
@country-flag-background: transparent;
@country-flag-small-height: 9px;
@country-flag-small-width: 16px;
@country-flag-medium-height: 13px;
@country-flag-medium-width: 24px;
@dialog-border-radius-desktop: 9px;
@dialog-border-radius-mobile: 12px;
@dialog-width: 540px;
@drawer-overlay-background: rgba(37, 42, 49, 0.5);
@form-box-small-height: 32;
@form-box-normal-height: 44;
@form-box-large-height: 52;
@form-element-background: rgb(255, 255, 255);
@form-element-disabled-background: rgb(232, 237, 241);
@form-element-disabled-foreground: rgb(79, 94, 113);
@form-element-disabled-opacity: 50;
@form-element-border-color-disabled: transparent;
@form-element-border-color: rgb(186, 199, 213);
@form-element-border-color-hover: rgb(166, 182, 200);
@form-element-border-color-active: rgb(148, 168, 190);
@form-element-border-color-focus: rgb(0, 112, 200); // Should be used for all form-elements when the component has active or focus state and it's needed to render border attribute, or combined with shadows.
@form-element-border-color-error: rgb(210, 28, 28); // Should be used for all form-elements when the component has error state and it's needed to render border attribute, or combined with shadows.
@form-element-border-color-error-hover: rgb(185, 25, 25); // Should be used for all form-elements when the component has error and hover state and it's needed to render border attribute, or combined with shadows.
@form-element-box-shadow: rgb(186, 199, 213);
@form-element-box-shadow-error: rgb(210, 28, 28);
@form-element-box-shadow-error-hover: rgb(185, 25, 25);
@form-element-box-shadow-hover: rgb(166, 182, 200);
@form-element-focus-box-shadow: rgb(0, 112, 200);
@form-element-error-focus-box-shadow: rgb(210, 28, 28);
@form-element-normal-font-size: 15;
@form-element-normal-padding: null;
@form-element-large-font-size: 16;
@form-element-foreground: rgb(101, 120, 144); // Should be used for the text when the value is not filled.
@form-element-filled-foreground: rgb(37, 42, 49);
@form-element-label-foreground: rgb(37, 42, 49);
@form-element-label-filled: rgb(79, 94, 113);
@form-element-prefix-foreground: rgb(79, 94, 113);
@form-element-small-padding: null;
@heading-display-font-size: 40;
@heading-display-font-weight: 700;
@heading-display-line-height: 44;
@heading-display-subtitle-font-size: 22;
@heading-display-subtitle-font-weight: 400;
@heading-display-subtitle-line-height: 28;
@heading-title-0-font-size: 28;
@heading-title-0-font-weight: 700;
@heading-title-0-line-height: 36;
@heading-title-1-font-size: 24;
@heading-title-1-font-weight: 700;
@heading-title-1-line-height: 32;
@heading-title-2-font-size: 20;
@heading-title-2-font-weight: 700;
@heading-title-2-line-height: 28;
@heading-title-3-font-size: 18;
@heading-title-3-font-weight: 700;
@heading-title-3-line-height: 24;
@heading-title-4-font-size: 16;
@heading-title-4-font-weight: 700;
@heading-title-4-line-height: 22;
@heading-title-5-font-size: 15;
@heading-title-5-font-weight: 700;
@heading-title-5-line-height: 20;
@heading-title-6-font-size: 13;
@heading-title-6-font-weight: 700;
@heading-title-6-line-height: 18;
@heading-foreground: rgb(37, 42, 49);
@heading-foreground-inverted: rgb(255, 255, 255);
@icon-primary-foreground: rgb(37, 42, 49);
@icon-secondary-foreground: rgb(79, 94, 113);
@icon-tertiary-foreground: rgb(186, 199, 213);
@icon-info-foreground: rgb(0, 112, 200);
@icon-success-foreground: rgb(4, 135, 36);
@icon-warning-foreground: rgb(179, 98, 0);
@icon-critical-foreground: rgb(210, 28, 28);
@icon-small-size: 16;
@icon-medium-size: 20;
@icon-large-size: 24;
@icon-extra-large-size: 28;
@illustration-extra-small-height: 90;
@illustration-small-height: 120;
@illustration-medium-height: 200;
@illustration-large-height: 280;
@illustration-display-height: 460;
@modal-border-radius: 16;
@modal-extra-small-width: 360;
@modal-small-width: 540;
@modal-normal-width: 740;
@modal-large-width: 900;
@modal-extra-large-width: 1280;
@tab-bundle-basic-foreground: linear-gradient(80.91deg, #E13E3B 0%, #E87E09 100%);
@tab-bundle-basic-background: rgb(255, 255, 255);
@tab-bundle-basic-background-hover: rgba(215, 51, 28, 0.08);
@tab-bundle-basic-background-active: rgba(215, 51, 28, 0.12);
@tab-bundle-medium-foreground: linear-gradient(80.91deg, #3719AB  0%, #8539DB 100%);
@tab-bundle-medium-background: rgb(255, 255, 255);
@tab-bundle-medium-background-hover: rgba(59, 30, 176, 0.08);
@tab-bundle-medium-background-active: rgba(59, 30, 176, 0.12);
@tab-bundle-top-background: rgb(255, 255, 255);
@tab-bundle-top-background-hover: rgb(241, 244, 247);
@tab-bundle-top-foreground: linear-gradient(80.91deg, #2D2D2E 0%, #696E73 100%);
@background-table-shadow-left: linear-gradient(to left, transparent, rgba(186, 199, 213, 23));
@background-table-shadow-right: linear-gradient(to right, transparent, rgba(186, 199, 213, 23));
@tag-colored-background: rgb(232, 244, 253);
@tag-colored-background-hover: rgb(222, 240, 252);
@tag-colored-background-active: rgb(199, 228, 250);
@tag-colored-foreground: rgb(0, 56, 102);
@tag-neutral-background: rgb(232, 237, 241);
@tag-neutral-background-hover: rgb(220, 227, 233);
@tag-neutral-background-active: rgb(202, 212, 222);
@tag-neutral-foreground: rgb(37, 42, 49);
@text-link-primary-foreground: rgb(0, 112, 97);
@text-link-primary-foreground-hover: rgb(0, 92, 79);
@text-link-primary-foreground-active: rgb(0, 66, 57);
@text-link-secondary-foreground: rgb(37, 42, 49);
@text-link-secondary-foreground-hover: rgb(0, 92, 79);
@text-link-secondary-foreground-active: rgb(0, 66, 57);
@text-link-success-foreground: rgb(41, 107, 51);
@text-link-success-foreground-hover: rgb(33, 89, 42);
@text-link-success-foreground-active: rgb(22, 59, 28);
@text-link-info-foreground: rgb(0, 90, 163);
@text-link-info-foreground-hover: rgb(0, 79, 143);
@text-link-info-foreground-active: rgb(0, 56, 102);
@text-link-warning-foreground: rgb(138, 69, 0);
@text-link-warning-foreground-hover: rgb(112, 56, 0);
@text-link-warning-foreground-active: rgb(77, 38, 0);
@text-link-critical-foreground: rgb(151, 12, 12);
@text-link-critical-foreground-hover: rgb(137, 11, 11);
@text-link-critical-foreground-active: rgb(99, 8, 8);
@text-link-white-foreground: rgb(255, 255, 255);
@text-link-white-foreground-hover: rgb(225, 244, 243);
@text-link-white-foreground-active: rgb(225, 244, 243);
@text-primary-background: rgba(37, 42, 49, 0.1);
@text-primary-foreground: rgb(37, 42, 49);
@text-secondary-background: rgba(79, 94, 113, 0.1);
@text-secondary-foreground: rgb(79, 94, 113);
@text-info-background: rgba(0, 112, 200, 0.1);
@text-info-foreground: rgb(0, 112, 200);
@text-success-background: rgba(4, 135, 36, 0.1);
@text-success-foreground: rgb(4, 135, 36);
@text-warning-background: rgba(179, 98, 0, 0.1);
@text-warning-foreground: rgb(179, 98, 0);
@text-critical-background: rgba(210, 28, 28, 0.1);
@text-critical-foreground: rgb(210, 28, 28);
@text-white-background: rgba(255, 255, 255, 0.1);
@text-white-foreground: rgb(255, 255, 255);
@border-radius-50: 2;
@border-radius-100: 4;
@border-radius-150: 6;
@border-radius-200: 8;
@border-radius-300: 12;
@border-radius-400: 16;
@border-radius-none: 0;
@border-radius-full: 9999;
@breakpoint-medium-mobile: 414;
@breakpoint-large-mobile: 576;
@breakpoint-tablet: 768;
@breakpoint-desktop: 992;
@breakpoint-large-desktop: 1200;
@duration-fast: 150;
@duration-normal: 300;
@duration-slow: 400;
@elevation-suppressed-background: rgb(245, 247, 249);
@elevation-flat-background: rgb(255, 255, 255);
@elevation-flat-border-color: rgb(232, 237, 241);
@elevation-flat-border-size: 1;
@elevation-nav-bar-box-shadow: rgb(27, 50, 73);
@elevation-level-1-box-shadow: rgb(79, 94, 113);
@elevation-level-2-box-shadow: rgb(79, 94, 113);
@elevation-fixed-background: rgb(255, 255, 255);
@elevation-fixed-box-shadow: rgb(37, 42, 49);
@elevation-fixed-reverse-background: rgb(255, 255, 255);
@elevation-fixed-reverse-box-shadow: rgb(79, 94, 113);
@elevation-level-3-box-shadow: rgb(79, 94, 113);
@elevation-level-3-reverse-box-shadow: rgb(79, 94, 113);
@elevation-level-4-box-shadow: rgb(79, 94, 113);
@palette-blue-light: rgb(232, 244, 253);
@palette-blue-light-hover: rgb(222, 240, 252);
@palette-blue-light-active: rgb(199, 228, 250);
@palette-blue-normal: rgb(0, 112, 200);
@palette-blue-normal-hover: rgb(1, 97, 172);
@palette-blue-normal-active: rgb(1, 80, 142);
@palette-blue-dark: rgb(0, 90, 163);
@palette-blue-dark-hover: rgb(0, 79, 143);
@palette-blue-dark-active: rgb(0, 62, 112);
@palette-blue-darker: rgb(0, 56, 102);
@palette-bundle-basic: rgb(215, 51, 28);
@palette-bundle-medium: rgb(59, 30, 176);
@palette-cloud-light: rgb(245, 247, 249);
@palette-cloud-light-hover: rgb(229, 234, 239);
@palette-cloud-light-active: rgb(214, 222, 230);
@palette-cloud-normal: rgb(232, 237, 241);
@palette-cloud-normal-hover: rgb(220, 227, 233);
@palette-cloud-normal-active: rgb(202, 212, 222);
@palette-cloud-dark: rgb(186, 199, 213);
@palette-cloud-dark-hover: rgb(166, 182, 200);
@palette-cloud-dark-active: rgb(148, 168, 190);
@palette-green-light: rgb(234, 245, 234);
@palette-green-light-hover: rgb(225, 239, 226);
@palette-green-light-active: rgb(205, 228, 207);
@palette-green-normal: rgb(4, 135, 36);
@palette-green-normal-hover: rgb(4, 118, 32);
@palette-green-normal-active: rgb(3, 99, 27);
@palette-green-dark: rgb(41, 107, 51);
@palette-green-dark-hover: rgb(33, 89, 42);
@palette-green-dark-active: rgb(28, 74, 35);
@palette-green-darker: rgb(22, 59, 28);
@palette-ink-dark: rgb(37, 42, 49);
@palette-ink-dark-hover: rgb(24, 27, 32);
@palette-ink-dark-active: rgb(11, 12, 15);
@palette-ink-light: rgb(101, 120, 144);
@palette-ink-light-hover: rgb(88, 105, 126);
@palette-ink-light-active: rgb(78, 92, 111);
@palette-ink-normal: rgb(79, 94, 113);
@palette-ink-normal-hover: rgb(62, 78, 99);
@palette-ink-normal-active: rgb(50, 66, 86);
@palette-orange-light: rgb(254, 242, 230);
@palette-orange-light-hover: rgb(252, 236, 218);
@palette-orange-light-active: rgb(250, 226, 198);
@palette-orange-normal: rgb(179, 98, 0);
@palette-orange-normal-hover: rgb(153, 84, 0);
@palette-orange-normal-active: rgb(128, 70, 0);
@palette-orange-dark: rgb(138, 69, 0);
@palette-orange-dark-hover: rgb(112, 56, 0);
@palette-orange-dark-active: rgb(87, 44, 0);
@palette-orange-darker: rgb(77, 38, 0);
@palette-product-light: rgb(225, 244, 243);
@palette-product-light-hover: rgb(214, 240, 236);
@palette-product-light-active: rgb(191, 232, 226);
@palette-product-normal: rgb(0, 143, 123);
@palette-product-normal-hover: rgb(0, 117, 101);
@palette-product-normal-active: rgb(0, 97, 83);
@palette-product-dark: rgb(0, 112, 97);
@palette-product-dark-hover: rgb(0, 92, 79);
@palette-product-dark-active: rgb(0, 66, 57);
@palette-product-darker: rgb(0, 61, 53);
@palette-red-light: rgb(250, 234, 234);
@palette-red-light-hover: rgb(248, 226, 226);
@palette-red-light-active: rgb(243, 206, 206);
@palette-red-normal: rgb(210, 28, 28);
@palette-red-normal-hover: rgb(185, 25, 25);
@palette-red-normal-active: rgb(157, 21, 21);
@palette-red-dark: rgb(151, 12, 12);
@palette-red-dark-hover: rgb(137, 11, 11);
@palette-red-dark-active: rgb(109, 9, 9);
@palette-red-darker: rgb(99, 8, 8);
@palette-social-facebook: rgb(59, 89, 152);
@palette-social-facebook-hover: rgb(56, 84, 144);
@palette-social-facebook-active: rgb(53, 79, 136);
@palette-white: rgb(255, 255, 255);
@palette-white-normal: rgb(255, 255, 255);
@palette-white-hover: rgb(241, 244, 247);
@palette-white-active: rgb(231, 236, 241);
@space-50: 2;
@space-100: 4;
@space-150: 6;
@space-200: 8;
@space-300: 12;
@space-400: 16;
@space-500: 20;
@space-600: 24;
@space-700: 28;
@space-800: 32;
@space-1000: 40;
@space-1200: 48;
@space-1300: 52;
@space-1600: 64;
@font-family: 'Roboto', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
@font-size-text-small: 13;
@font-size-text-normal: 15;
@font-size-text-large: 16;
@font-size-text-extra-large: 18;
@line-height-text: 1.4;
@line-height-small: 16;
@line-height-normal: 20;
@line-height-large: 24;
@line-height-extra-large: 24;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;
@z-index-default: 1;
@z-index-sticky: 100;
@z-index-navigation-bar: 700;
@z-index-modal-overlay: 800;
@z-index-drawer: 815;
@z-index-modal: 825;
@z-index-on-the-top: 900;
